<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		td{
			text-align: center;
			width: 125px;
		}
		.c2{
			margin-left: 40px;
			margin-bottom: 40px;
		}
	</style>
	
	<script type="text/javascript">
	    
	   
	</script>
</head>
<body>
	<br/><form action="queryStu.do" method="get">
		姓名<input name="stuName" value="${student.stuName}"/>;&nbsp
		性别
			<select name="stuGender">
				<option value="男" <c:if test="${student.stuGender == '男'}">selected="selected" </c:if>>男</option>
				<option value="女" <c:if test="${student.stuGender == '女'}">selected="selected" </c:if>>女</option>
			</select>&nbsp;&nbsp;&nbsp;
			<input type="submit" value="查询"/>
		</form>
	<br/>
	</center><br/>

	<input type="button" id="batchDel" value="批量删除" style="margin-left: 150px"/>
	<br/>
	<table border="1px" width="80%" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<th><input type="checkbox" id="checkAll" />全选/全不选</th>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>生日</th>
			<th>爱好</th>
			<th>头像</th>
			<th>操作</th>
		</tr>
		<!-- 遍历学生的信息 -->
		<c:forEach items="${page.pageList}" var="stu">
			<tr>
				<td><input type="checkbox" class="ch" value="${stu.sid}" /></td>
				<td>${stu.sid}</td>
				<td>${stu.stuName}</td>
				<td>${stu.stuGender}</td>
				<td>${stu.stuBir}</td>

				<td>${stu.stuHobby}</td>
				<td>
					<img src="http://localhost:80/img/${stu.photo}" alt="找不到了" width="60px" height="40px">
				</td>
				<td>
					<a href="updateById.do?sid=${stu.sid}">修改
</a>
				</td>
			</tr>
		</c:forEach>>

	</table>

	<script type="text/javascript">
		var check = document.getElementById("checkAll");
		check.onclick = function () {
			//获取复选框checked的属性值
			var ch = check.checked;
			console.log(ch);
			//获取所有要选中的复选框
			var chek = document.getElementsByClassName("ch");
			//遍历选中的复选框
			for (var i = 0 ;i<chek.length;i++){
				chek[i].checked = ch;
			}
		}
		//批量删除

		//获取删除的按钮对象
		var batch = document.getElementById("batchDel");
		//点击按钮触发点击事件
		batch.onclick = function () {
			//删除提示
			var flg = confirm("请二次确认删除");

			if(!flg){
				return;
			}
				var chek = document.getElementsByClassName("ch");
				var ids = "";
				for (var i =0;i<chek.length;i++){
					//获取复选框checked的属性值
					var choose = chek[i].checked;
					//如果返回true,则表示被选中
					if(choose){
						var va=	chek[i].value;
						console.log(choose,":",va)
						ids += ","+va;//1,2,3,4
					}
				}
				//对收集道德学生编号进行处理
				console.log(ids);
				var id = ids.substring(1);
				console.log(id);
				//判断有被选中的学生
				if(id != ""){
					//将要删除的学生的学生编号提交给后台,完成删除
					location.href = "deleteStudentById.do?ids=" + id;
				}else {
					alert("请至少选中一个学生进行删除~~~~~~")
				}

		}

	</script>

	<br/><br/>
	<center>
		<a href="queryStu.do?currentPage=1&stuName=${student.stuName}&stuGender=${student.stuGender}" class="c2">首页</a>
		<a href="queryStu.do?currentPage=${page.prePage}&stuName=${student.stuName}&stuGender=${student.stuGender}" class="c2">上一页</a>
		<a href="queryStu.do?currentPage=${page.nextPage}&stuName=${student.stuName}&stuGender=${student.stuGender}" class="c2">下一页</a>
		<a href="queryStu.do?currentPage=${page.countPage}&stuName=${student.stuName}&stuGender=${student.stuGender}" class="c2">尾页</a>
		<span class="c2">当前页码<input size="4" value="${page.currentPage}"/></span>
		<span class="c2">总记录数<input size="4" value="${page.countNum}"/></span>
	</center>

</body>
</html>